import 'package:flutter/material.dart';
// import 'package:flutter_app/helper.dart';
// import 'package:flutter_app/router.dart';
import 'package:get/get.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';

import 'logic.dart';
import 'state.dart';

class AllOrdersPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _AllOrdersPage();
  }
}

class _AllOrdersPage extends State<AllOrdersPage> {
  final AllOrdersLogic logic = Get.put(AllOrdersLogic());
  final AllOrdersState state = Get.find<AllOrdersLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xffEA5504),
        title: Text(
          '全部订单',
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
      ),
      body: GetBuilder<AllOrdersLogic>(
        builder: (logic) {
          return DefaultTabController(
            length: 5,
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    height: setWidth(90),
                    width: MediaQuery.of(context).size.width,
                    color: Colors.white,
                    child: TabBar(
                      onTap: (index) {
                        logic.onTabChange(index);
                      },
                      isScrollable: true,
                      indicatorColor: Color(0xffEA5504),
                      indicatorSize: TabBarIndicatorSize.label,
                      unselectedLabelColor: Color(0xff666666),
                      labelStyle: TextStyle(
                        fontSize: 14,
                        color: Color(0xff666666),
                      ),
                      labelColor: Color(0xffEA5504),
                      tabs: <Widget>[
                        Tab(text: "全部"),
                        Tab(text: "待付款"),
                        Tab(text: "待配送/自提"),
                        Tab(text: "待送达"),
                        Tab(text: "待评价"),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                      color: Color(0xffF3F4F6),
                      child: ListView.separated(
                        scrollDirection: Axis.vertical,
                        padding: EdgeInsets.symmetric(vertical: setWidth(20)),
                        itemBuilder: (context, index) {
                          if (index == 0) {
                            return _spellGroupWidget();
                          }
                          return _orderItemWidget(index: index);
                        },
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(
                            height: setWidth(20),
                          );
                        },
                        itemCount: state.orderList.length,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  // orderItem
  Widget _orderItemWidget({int index}) {
    String orderStr = '';
    Color orderColor = Colors.transparent;
    if (state.orderList[index] == 1) {
      orderStr = '待付款';
      orderColor = Color(0xffEA5504);
    } else if (state.orderList[index] == 2) {
      orderStr = '待发货';
      orderColor = Color(0xffEA5504);
    } else if (state.orderList[index] == 3) {
      orderStr = '已发货';
      orderColor = Color(0xffEA5504);
    } else if (state.orderList[index] == 4) {
      orderStr = '待评价';
      orderColor = Color(0xffEA5504);
    } else {
      orderStr = '已完成';
      orderColor = Color(0xff999999);
    }
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: setWidth(82),
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.only(
              left: setWidth(30),
              right: setWidth(20),
            ),
            decoration: BoxDecoration(
              border: Border.all(
                color: Color(0xffEFEFEF),
                width: setWidth(1),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/images/store.png',
                      width: setWidth(30),
                      height: setWidth(30),
                      fit: BoxFit.cover,
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                        left: setWidth(14),
                        right: setWidth(12),
                      ),
                      child: Text(
                        '长风公园大悦城店',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 14,
                        ),
                      ),
                    ),
                    state.orderList[index] == 2
                        ? Container(
                            width: setWidth(56),
                            height: setWidth(32),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(setWidth(6)),
                              gradient: LinearGradient(
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                colors: [
                                  Color(0xffFFBD00),
                                  Color(0xffEA5504),
                                ],
                              ),
                            ),
                            alignment: Alignment.center,
                            child: Text(
                              '预售',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 10,
                              ),
                            ),
                          )
                        : SizedBox(),
                  ],
                ),
                Text(
                  orderStr,
                  style: TextStyle(
                    color: orderColor,
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(30),
              top: setWidth(18),
              right: setWidth(16),
              bottom: setWidth(48),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Wrap(
                  spacing: setWidth(20),
                  children: [
                    '',
                    '',
                    '',
                    '',
                    '',
                  ]
                      .asMap()
                      .map((key, value) {
                        return MapEntry(
                          key,
                          Container(
                            width: setWidth(100),
                            height: setWidth(100),
                            child: Image.asset(
                              'assets/images/avatar.png',
                              width: setWidth(100),
                              height: setWidth(100),
                              fit: BoxFit.cover,
                            ),
                          ),
                        );
                      })
                      .values
                      .toList(),
                ),
                Container(
                  width: setWidth(124),
                  alignment: Alignment.centerRight,
                  child: Text(
                    '共5件',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Color(0xff999999),
                      fontSize: 12,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(24),
              right: setWidth(20),
              bottom: setWidth(24),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(
                        text: '应付：¥',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 12,
                        ),
                      ),
                      TextSpan(
                        text: '263.22',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                ),
                _itemWidget(index: state.orderList[index]),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // item
  Widget _itemWidget({int index}) {
    if (index == 1) {
      return Container(
        width: setWidth(210),
        height: setWidth(52),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(setWidth(26)),
          color: Color(0xffEA5504),
        ),
        alignment: Alignment.center,
        child: Text(
          '去付款17:21:12',
          style: TextStyle(
            color: Colors.white,
            fontSize: 14,
          ),
        ),
      );
    } else if (index == 2) {
      return InkWell(
        onTap: () {
          print('再来一单 点击事件！！！');
          Get.toNamed(RouteConfig.danGeChuPing); // 单个初评
        },
        child: Container(
          width: setWidth(140),
          height: setWidth(52),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(setWidth(26)),
              border: Border.all(
                width: setWidth(1),
                color: Color(0xffea5504),
              )),
          alignment: Alignment.center,
          child: Text(
            '再来一单',
            style: TextStyle(
              color: Color(0xffea5504),
              fontSize: 12,
            ),
          ),
        ),
      );
    } else if (index == 3) {
      return Row(
        children: [
          InkWell(
            onTap: () {
              print('查看物流 点击事件！！！');
              Get.toNamed(RouteConfig.evaluationSuccess); // 评价成功
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                border: Border.all(
                  width: setWidth(1),
                  color: Color(0xffcccccc),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                '查看物流',
                style: TextStyle(
                  color: Color(0xff222222),
                  fontSize: 12,
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
            child: InkWell(
              onTap: () {
                print('再来一单 点击事件！！！');
                Get.toNamed(RouteConfig.viewComments); // 查看评价
              },
              child: Container(
                width: setWidth(140),
                height: setWidth(52),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(setWidth(26)),
                  border: Border.all(
                    width: setWidth(1),
                    color: Color(0xffEA5504),
                  ),
                ),
                alignment: Alignment.center,
                child: Text(
                  '再来一单',
                  style: TextStyle(
                    color: Color(0xffEA5504),
                    fontSize: 12,
                  ),
                ),
              ),
            ),
          ),
          InkWell(
            onTap: () {
              print('确认收货 点击事件！！！');
              Get.toNamed(RouteConfig.pingJiaShaiDanDetails); // 评价晒单 详情
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                color: Color(0xffEA5504),
              ),
              alignment: Alignment.center,
              child: Text(
                '确认收货',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                ),
              ),
            ),
          ),
        ],
      );
    } else if (index == 4) {
      return Row(
        children: [
          InkWell(
            onTap: () {
              print('再来一单 点击事件！！！');
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                border: Border.all(
                  width: setWidth(1),
                  color: Color(0xffEA5504),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                '再来一单',
                style: TextStyle(
                  color: Color(0xffEA5504),
                  fontSize: 12,
                ),
              ),
            ),
          ),
          SizedBox(
            width: setWidth(20),
          ),
          InkWell(
            onTap: () {
              print('评价晒单 点击事件！！！');
              Get.toNamed(RouteConfig.pingJiaShaiDan); // 评价晒单
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                color: Color(0xffEA5504),
              ),
              alignment: Alignment.center,
              child: Text(
                '评价晒单',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 12,
                ),
              ),
            ),
          ),
        ],
      );
    } else {
      return Row(
        children: [
          InkWell(
            onTap: () {
              print('开具发票 点击事件！！！');
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                border: Border.all(
                  width: setWidth(1),
                  color: Color(0xffcccccc),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                '开具发票',
                style: TextStyle(
                  color: Color(0xff222222),
                  fontSize: 12,
                ),
              ),
            ),
          ),
          SizedBox(
            width: setWidth(20),
          ),
          InkWell(
            onTap: () {
              print('再来一单 点击事件！！！');
            },
            child: Container(
              width: setWidth(140),
              height: setWidth(52),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(setWidth(26)),
                border: Border.all(
                  width: setWidth(1),
                  color: Color(0xffEA5504),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                '再来一单',
                style: TextStyle(
                  color: Color(0xffEA5504),
                  fontSize: 12,
                ),
              ),
            ),
          ),
        ],
      );
    }
  }

  // 拼团
  Widget _spellGroupWidget() {
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: setWidth(82),
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.only(
              left: setWidth(30),
              right: setWidth(20),
            ),
            decoration: BoxDecoration(
              border: Border.all(
                color: Color(0xffEFEFEF),
                width: setWidth(1),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/images/store.png',
                      width: setWidth(30),
                      height: setWidth(30),
                      fit: BoxFit.cover,
                    ),
                    Padding(
                      padding: EdgeInsets.only(
                        left: setWidth(14),
                        right: setWidth(12),
                      ),
                      child: Text(
                        '长风公园大悦城店',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 14,
                        ),
                      ),
                    ),
                    Container(
                      width: setWidth(56),
                      height: setWidth(32),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(setWidth(6)),
                        gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            Color(0xffFFBD00),
                            Color(0xffEA5504),
                          ],
                        ),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        '拼团',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 10,
                        ),
                      ),
                    ),
                  ],
                ),
                Text(
                  '拼团中',
                  style: TextStyle(
                    color: Color(0xffEA5504),
                    fontSize: 12,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(30),
              top: setWidth(18),
              right: setWidth(16),
              bottom: setWidth(48),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  children: [
                    SizedBox(
                      height: setWidth(6),
                    ),
                    Image.asset(
                      'assets/images/avatar.png',
                      width: setWidth(100),
                      height: setWidth(100),
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
                SizedBox(
                  width: setWidth(20),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '林内(Rinnai) 16升燃气热水器家用…',
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Color(0xff2b2b2b),
                          fontSize: 13,
                        ),
                      ),
                      SizedBox(
                        height: setWidth(12),
                      ),
                      Text.rich(
                        TextSpan(
                          children: [
                            TextSpan(
                              text: '颜色：白色',
                              style: TextStyle(
                                color: Color(0xff999999),
                                fontSize: 14,
                              ),
                            ),
                            WidgetSpan(
                              child: SizedBox(
                                width: setWidth(26),
                              ),
                            ),
                            TextSpan(
                              text: 'x1',
                              style: TextStyle(
                                color: Color(0xff999999),
                                fontSize: 14,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.only(
              left: setWidth(24),
              right: setWidth(28),
              bottom: setWidth(24),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text.rich(
                  TextSpan(
                    children: [
                      TextSpan(
                        text: '应付：¥',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 12,
                        ),
                      ),
                      TextSpan(
                        text: '263.22',
                        style: TextStyle(
                          color: Color(0xff333333),
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: [
                    InkWell(
                      onTap: () {
                        print('订单详情 点击事件！！！');
                      },
                      child: Container(
                        width: setWidth(140),
                        height: setWidth(52),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(setWidth(26)),
                          border: Border.all(
                            width: setWidth(1),
                            color: Color(0xffcccccc),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          '订单详情',
                          style: TextStyle(
                            color: Color(0xff222222),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: setWidth(20),
                    ),
                    InkWell(
                      onTap: () {
                        print('拼团详情 点击事件！！！');
                      },
                      child: Container(
                        width: setWidth(140),
                        height: setWidth(52),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(setWidth(26)),
                          border: Border.all(
                            width: setWidth(1),
                            color: Color(0xffEA5504),
                          ),
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          '拼团详情',
                          style: TextStyle(
                            color: Color(0xffEA5504),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
